<template>
  <div>
    <table border="1" width="700" style="border-collapse: collapse">
      <caption>
        购物车
      </caption>
      <ShopCarHeader :goodList='goodList' @changeChecked='changeCheckedFn'/>
      
      <ShopCar :goodList='goodList' @reduceBtn='reduceFn' @addBtn='addFn' @del='delFn' @change='changeFn' />

      <ShopCarFooter :goodList='goodList'/>
    </table>
  </div>
</template>

<script>
//1.引入 双驼峰
import ShopCar from './components/ShopCar'
import ShopCarHeader from './components/ShopCarHeader.vue'
import ShopCarFooter from './components/ShopCarFooter.vue'
export default {
  //2.注册
  components: {
    ShopCar,
    ShopCarHeader,
    ShopCarFooter

  },
  methods:{
    //减
    reduceFn(index){
    return  this.goodList[index].num--//[{}]  [].[index]的得到对象
    },
    //加
    addFn(index){
      return this.goodList[index].num++
    },
    //删除
    delFn(index){
      console.log(index);
      this.goodList.splice(index,1)
    },
    //改变单选
    changeFn(index){
      //filter得到一个数组，find得到一个对象
   //console.log(index);
   //不是用id传的
    this.goodList[index].checked=! this.goodList[index].checked
    },
    //全选控制单选 forEach遍历修改，没有返回值
    changeCheckedFn(val){
    this.goodList.forEach(item=>item.checked=val);
    }
  },
  
  data() {
    return {
      goodList: [
        {
          name: '诸葛亮',
          price: 1000,
          num: 1,
          checked: false,
        },
        {
          name: '蔡文姬',
          price: 1500,
          num: 1,
          checked: false,
        },
        {
          name: '妲己',
          price: 2000,
          num: 1,
          checked: false,
        },
        {
          name: '鲁班',
          price: 2200,
          num: 1,
          checked: false,
        },
      ],
    }
  },
}
</script>

<style></style>
